<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>咨询栏目</title>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <!--展示数据-->
    <link rel="stylesheet" href="/css/index.css">
    <!--从后端获取数据-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--搜索-->
    <el-row>
        <el-col :span="4">
        </el-col>
        <el-col :span="4">
            <el-input v-model="searchForm.name" placeholder="请输入新闻咨询名称" size="mini"></el-input>
        </el-col>
        <el-col :span="4">
            <el-select v-model="searchForm.isValid" placeholder="请选有效状态" size="mini">
                <el-option label="有效" value="1"></el-option>
                <el-option label="失效" value="0"></el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
            <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="handlerAdd">添加</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
        </el-col>

        <el-col :span="2">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>

    <!--表格数据  : 相当于v-bind: -->
    <el-table
            :data="tableData"
            style="width: 100%">
        <!--表格的列   prop 组件   父作用域向子作用域传值-->
        <el-table-column
                prop="id"
                label="咨询编号">
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="name"
                label="咨询名称">
        </el-table-column>

        <el-table-column label="是否允许修改">
            <template slot-scope="scope">
                <span v-if="scope.row.isEdit == 1">是</span>
                <span v-if="scope.row.isEdit == 0">否</span>
            </template>
        </el-table-column>
        <el-table-column
                label="是否有效">
            <template slot-scope="scope">
                <span v-if="scope.row.isValid == 1">是</span>
                <span v-if="scope.row.isValid == 0">否</span>
            </template>
        </el-table-column>
        <el-table-column
                label="是否作为web栏目">
            <template slot-scope="scope">
                <span v-if="scope.row.isWeb == 1">是</span>
                <span v-if="scope.row.isWeb == 0">否</span>
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="description"
                label="描述">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,25,30,35,40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="咨询名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item>
                &nbsp;&nbsp;  <span>是否允许被修改</span>&nbsp;&nbsp;&nbsp;
                <el-select v-model="form.isEdit" placeholder="是否允许被修改">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <span>是否有效</span>&nbsp;&nbsp;&nbsp;
                <el-select v-model="form.isValid" placeholder="是否有效">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                 <span>是否作为web栏目</span>&nbsp;&nbsp;&nbsp;
                <el-select v-model="form.isWeb" placeholder="是否作为web栏目">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdate">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
        <span>确认要永久删除这条记录吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="DeleteA">确 定</el-button>
  </span>
    </el-dialog>

</div>
<script>
    let vue = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],//table数据
                currentPage: 1,//第几页  页码
                pageSize: 5,//每页显示数量
                total: 100,//分页数据总数量
                searchForm: {"name": '', "isValid": ''},
                dialogFormVisible: false,
                dialogVisible: false,
                title: "咨询添加",
                A: [],
                form: {
                    "id": '',
                    "name": '',
                    "isEdit": '',
                    "isValid": '',
                    "sortNo": '',
                    "isWeb": '',
                    "description": ''
                },
                formLabelWidth: '120px',
            }
        },
        created: function () {
            this.loadData()
        },

        methods: {
            loadData() {
                let _this = this;
                axios.post("/channel/queryPage", {
                    "pageNo": this.currentPage, "pageSize": this.pageSize,
                    "data": {
                        "title": this.searchForm.title,
                        "author": this.searchForm.author,
                        "source": this.searchForm.source
                    }
                }).then(function (response) {
                    console.log(JSON.stringify(response));
                    if (response.data.code == 200) {
                        _this.tableData = response.data.data.list;
                        console.log(response.data.data.list)
                        _this.total = response.data.data.total;
                    }
                })
                    .catch(function (error) {//错误的处理
                        // handle error
                        alert(error)
                        //console.log(error);
                    })
            },
            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //调用加载数据方法
                this.loadData();
            },
            //页码（第几页）发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                //调用加载数据方法
                this.loadData();
            },
            //搜索方法
            search() {
                this.loadData();
            },
            //刷新方法
            refresh() {
                this.loadData();
            },
            //跳转更新
            handleEdit(index, row) {
                console.log(index, row);
                //让对话框显示
                this.dialogFormVisible = true;
                //让title值也发生变化
                this.title = '咨询更新';
                //给表单赋值
                this.form = row;
            },
            //跳转添加
            handlerAdd() {
                //让对话框显示
                this.dialogFormVisible = true;
                //让title值也发生变化
                this.title = '咨询添加';
                //让form清空
                this.form = {};
            },
            //真正添加或者更新
            addOrUpdate() {
                //定义请求路径，默认是添加
                let uri = "/channel/adds";
                //判断是否是更新
                if (this.title == '咨询更新') {
                    uri = "/channel/update";
                }
                //定义变量_this=this
                let _this = this;
                //axios向后台发请求
                axios.post(uri, //请求的url
                    this.form)//请求参数  json格式
                    .then(function (response) {//回调函数
                        //前端控制台打印  response 是json对象
                        console.log(response);
                        console.log(JSON.stringify(response));
                        //response获取后台数据时，一定加data  response.data相当于从响应的body中获取
                        if (response.data.code == 200) {
                            //提示成功
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            //关闭弹框
                            _this.dialogFormVisible = false;
                            //重新加载数据
                            _this.loadData();
                        } else {
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },
            //跳转删除
            handleDelete(index, row) {
                this.dialogVisible = true;
                this.A = row.id;
                console.log(row.id)
            },
            //删除方法
            DeleteA() {
                let _this = this;
                axios.delete("/channel/delete?id=" + this.A)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.$message({
                                message: "操作成功！",
                                type: 'success'
                            });
                            _this.dialogVisible = false;
                            _this.loadData();
                        } else {
                            _this.$message.error('操作失败！');
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
        }
    })
</script>
</body>
</html>